<template>
	<view class="page-container flex fd-c">
		<topBar :back="true">
			<template #center>
				<view class="nav-bar flex ai-c jc-c" style="font-size: 32rpx;font-weight: 700;">
					排名
				</view>
			</template>
		</topBar>

		<scroll-view class="scrollable-content ranking-container" scroll-y>
			<view v-if="!showQuizPage" class="result-content">
				<!-- 排名表格 -->
				<view class="ranking-table">
					<view class="table-header jc-sb">
						<view style="flex: 3;" class="flex">
							<view class="header-cell">排名</view>
							<view class="header-cell" style="margin-left: 16rpx;">姓名</view>
						</view>
						<view style="flex: 3;" class="flex">
							<view class="header-cell" style="width: 60rpx;">正确</view>
							<view class="header-cell" style="margin-left: 16rpx;width: 60rpx;">错误</view>
							<view class="header-cell" style="margin-left: 16rpx;width: 60rpx;">未做</view>
						</view>

						<view class="header-cell flex ai-c jc-fd" style="width: 74rpx;">用时</view>
					</view>

					<view>
						<view v-for="(item, index) in rankingData" :key="index" class="table-row flex jc-sb"
							:class="{ 'my-row': item.isMe }">
							<view class="flex" style="flex: 3;">
								<view class="rank-cell">
									<view class="rank-number">
										<image v-if="item.rank === 1" style="width: 56rpx;height: 56rpx;"
											src="/static/diyiminghuangguan.png"></image>
										<image v-else-if="item.rank === 2" style="width: 56rpx;height: 56rpx;"
											src="/static/diermingxioaguan.png"></image>
										<view v-else style="width: 56rpx;height: 56rpx;"
											class="flex ai-c jc-c" :style="{ color: item.isMe ? '#0F50DC' : '#212529' }">{{
											item.rank
											}}</view>
									</view>
								</view>
								<view class="name-cell" style="margin-left: 16rpx;">{{ item.name }}</view>
							</view>
							<view class="flex" style="flex: 3;">
								<view class="header-cell flex ai-c jc-c" style="width: 60rpx;">{{ item.correct }}</view>
								<view class="header-cell flex ai-c jc-c" style="margin-left: 16rpx;width: 60rpx;;">{{
									item.wrong }}</view>
								<view class="header-cell flex ai-c jc-c" style="margin-left: 16rpx;width: 60rpx;;">{{
									item.unanswered }}
								</view>
							</view>
							<view class="header-cell flex ai-c jc-fd" style="width: 74rpx;">{{ item.time }}</view>
						</view>
					</view>
				</view>


			</view>
			<!-- 查看答案链接 -->
			<view v-if="!showQuizPage" class="view-answers flex ai-c jc-c" @click="viewAnswers">
				<text class="answers-link">查看答案 </text>
				<image src="/static/youzhuangjiantyou.png" style="width: 28rpx; height: 28rpx;" mode="aspectFill">
				</image>
				<!-- <uni-icons type="right" color="#999" size="14"
					style="margin-left: 4rpx;"></uni-icons> -->
			</view>

			<!-- 底部按钮 -->
			<view v-if="!showQuizPage" class="action-buttons"
				style="margin: 0 auto;margin-bottom: 40rpx;margin-top: 100rpx;">
				<button class="action-btn view-ranking" @click="goHomepage">首页</button>
				<button class="action-btn play-again" @click="shareResult">分享</button>
			</view>
			<canvas canvas-id="shareCanvas" id="shareCanvas" width="240" height="300"></canvas>

			<!-- 答题页面 -->
			<quiz-page v-if="showQuizPage" style="width: 100%;" :questions="quizQuestions" :time-limit="180"
				:review-mode="true" @back="handleQuizBack" @submit="handleQuizSubmit"
				@question-change="handleQuestionChange" @time-up="handleTimeUp" />
		</scroll-view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import QuizPage from '@/components/quiz-page.vue'
	import topBar from '@/components/topBar.vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import api from '@/api'
	import {
		useUserStore
	} from '@/store/index.js'
	import {
		BASE_URL
	} from '@/utils/request'
	const userStore = useUserStore()

	const room_id = ref('')
	onLoad((options) => {
		console.log(options)
		room_id.value = options.room_id || '114'
		api.getQuestionRank({
			room_id: room_id.value
		}).then(res => {
			console.log(res)
			rankingData.value = res.data.map(item => {
				return {
					rank: item.ming,
					name: item.user_id == userStore.userInfo.id ? '我' : item.nickname,
					correct: item.correct,
					wrong: item.lose,
					unanswered: item.unde,
					time: item.time,
					isMe: item.user_id == userStore.userInfo.id
				}
			})
		})


		uni.createSelectorQuery().select('#shareCanvas').fields({
			node: true,
			size: true
		}).exec((res) => {
			const canvasNode = res[0] ? res[0].node : null;
			if (canvasNode) {
				canvasNode.width = canvasWidth;
				canvasNode.height = canvasHeight;
			} else {
				console.log('canvas 元素未找到');
			}
		});



	})



	// 排名数据
	const rankingData = ref([{
			rank: 1,
			name: '我',
			correct: 15,
			wrong: 0,
			unanswered: 0,
			time: '02:15',
			isMe: true
		},
		{
			rank: 2,
			name: 'bbbbbbbb',
			correct: 15,
			wrong: 0,
			unanswered: 0,
			time: '02:16',
			isMe: false
		},
		{
			rank: 3,
			name: 'cccc',
			correct: 14,
			wrong: 1,
			unanswered: 0,
			time: '02:10',
			isMe: false
		},
		{
			rank: 4,
			name: 'dddddddd',
			correct: 13,
			wrong: 0,
			unanswered: 2,
			time: '01:15',
			isMe: false
		},
		{
			rank: 5,
			name: 'eeeeeee',
			correct: 13,
			wrong: 2,
			unanswered: 0,
			time: '01:20',
			isMe: false
		},
		{
			rank: 6,
			name: 'fffffff',
			correct: 12,
			wrong: 3,
			unanswered: 0,
			time: '02:15',
			isMe: false
		},
		{
			rank: 7,
			name: 'ggggggg',
			correct: 10,
			wrong: 5,
			unanswered: 0,
			time: '02:15',
			isMe: false
		},
		{
			rank: 8,
			name: 'hhhhhhhhhh',
			correct: 10,
			wrong: 0,
			unanswered: 5,
			time: '02:40',
			isMe: false
		},
		{
			rank: 9,
			name: 'ggggggg',
			correct: 10,
			wrong: 5,
			unanswered: 0,
			time: '02:15',
			isMe: false
		},
		{
			rank: 10,
			name: 'hhhhhhhhhh',
			correct: 10,
			wrong: 0,
			unanswered: 5,
			time: '02:40',
			isMe: false
		}
	])

	// 答题页面显示状态
	const showQuizPage = ref(false)

	// 模拟题目数据
	const quizQuestions = ref([{
			id: 1,
			question: '以下哪个是JavaScript的基本数据类型？',
			options: [{
					text: 'Object',
					isCorrect: false
				},
				{
					text: 'Array',
					isCorrect: false
				},
				{
					text: 'String',
					isCorrect: true
				},
				{
					text: 'Function',
					isCorrect: false
				}
			],
			correctAnswer: 2,
			userAnswer: 2,
			explanation: 'String是JavaScript的基本数据类型，Object、Array、Function都是引用类型'
		},
		{
			id: 2,
			question: 'CSS中，以下哪个属性用于设置元素的透明度？',
			options: [{
					text: 'visibility',
					isCorrect: false
				},
				{
					text: 'opacity',
					isCorrect: true
				},
				{
					text: 'transparency',
					isCorrect: false
				},
				{
					text: 'alpha',
					isCorrect: false
				}
			],
			correctAnswer: 1,
			userAnswer: 1,
			explanation: 'opacity属性用于设置元素的透明度，取值范围是0-1'
		},
		{
			id: 3,
			question: 'HTML5中新增的语义化标签不包括？',
			options: [{
					text: '<header>',
					isCorrect: false
				},
				{
					text: '<nav>',
					isCorrect: false
				},
				{
					text: '<div>',
					isCorrect: true
				},
				{
					text: '<footer>',
					isCorrect: false
				}
			],
			correctAnswer: 2,
			userAnswer: 2,
			explanation: '<div>是HTML4就有的标签，不是HTML5新增的语义化标签'
		},
		{
			id: 4,
			question: 'Vue.js中，以下哪个生命周期钩子最先执行？',
			options: [{
					text: 'mounted',
					isCorrect: false
				},
				{
					text: 'created',
					isCorrect: false
				},
				{
					text: 'beforeMount',
					isCorrect: false
				},
				{
					text: 'beforeCreate',
					isCorrect: true
				}
			],
			correctAnswer: 3,
			userAnswer: 3,
			explanation: 'beforeCreate是Vue实例初始化后，数据观测和事件配置之前调用的钩子'
		},
		{
			id: 5,
			question: '以下哪个不是JavaScript的循环语句？',
			options: [{
					text: 'for',
					isCorrect: false
				},
				{
					text: 'while',
					isCorrect: false
				},
				{
					text: 'loop',
					isCorrect: true
				},
				{
					text: 'do...while',
					isCorrect: false
				}
			],
			correctAnswer: 2,
			userAnswer: 2,
			explanation: 'JavaScript中没有loop语句，只有for、while、do...while等循环语句'
		}
	])

	// 跳转首页
	const goHomepage = () => {
		uni.switchTab({
			url: '/pages/index/index'
		})
	}

	// 查看答案
	const viewAnswers = () => {
		// 跳转答题页面

		api.getansinfo({
			room_id: room_id.value,
			user_id: userStore.userInfo.id
		}).then(res => {
			console.log(res)
			quizQuestions.value = res.data.map(item => {
				return {
					...item,
					title: item.title,
					is_anwser: item.is_anwser,
					correct_answer: item.correct_answer,
					anwser: item.anwser,
					options: [{
							text: item.option_a,
							isCorrect: false
						},
						{
							text: item.option_b,
							isCorrect: false
						},
						{
							text: item.option_c,
							isCorrect: false
						},
						{
							text: item.option_d,
							isCorrect: false
						}
					],
				}
			})

			showQuizPage.value = true
		})
		uni.showToast({
			title: '查看答案',
			icon: 'success'
		})
	}
	// 分享图片的功能
	const shareResult = () => {
		uni.navigateTo({
			url: '/pages/index/datiqian/share/share?room_id=' + room_id.value || '114'
		})
	};
	// 答题页面事件处理
	const handleQuizBack = () => {
		showQuizPage.value = false
	}

	const handleQuizSubmit = (result) => {
		console.log('答题结果:', result)
		showQuizPage.value = false
	}

	const handleQuestionChange = (questionIndex) => {
		console.log('切换到题目:', questionIndex)
	}

	const handleTimeUp = () => {
		console.log('时间到')
		showQuizPage.value = false
	}
</script>

<style lang="scss" scoped>
	.page-container {
		width: 100%;
		height: 100vh;
		background: #fff;
	}

	.ranking-container {
		padding: 32rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
	}

	.result-content {
		border-radius: 32rpx;
		width: 100%;
		box-sizing: border-box;
		flex: 1;
		overflow-y: auto;
		background: radial-gradient(52% 52% at 72% 89%, rgba(157, 123, 243, 0.08) 0%, rgba(188, 73, 255, 0) 100%), radial-gradient(69% 69% at 4% 86%, rgba(166, 155, 253, 0.08) 0%, rgba(128, 193, 255, 0) 100%), radial-gradient(45% 74% at 94% 10%, rgba(65, 209, 200, 0.08) 0%, rgba(54, 159, 116, 0) 100%), rgba(64, 134, 238, 0.04);
	}

	// 排名表格样式
	.ranking-table {
		width: 100%;
		border-radius: 24rpx;
		overflow: hidden;
	}

	.table-header {
		display: flex;
		padding: 32rpx;
		border-bottom: 0.5px solid rgba(0, 0, 0, 0.1);
		margin-bottom: 20rpx;
	}

	.header-cell {
		font-size: 24rpx;
		font-weight: 600;
		color: #495057;
	}

	.table-row {
		display: flex;
		transition: background-color 0.2s;
		padding: 0 32rpx;
		padding-top: 0;

		&.my-row {
			.name-cell {
				color: #0F50DC;
			}

			.header-cell {
				color: #0F50DC;
			}
		}
	}

	.rank-cell,
	.name-cell,
	.score-cell,
	.time-cell {
		padding: 20rpx 0;
		text-align: center;
		font-size: 26rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.action-buttons {
		display: flex;
		gap: 24rpx;
		width: 100%;
	}

	.action-btn {
		width: 280rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		border-radius: 64rpx;
		font-size: 32rpx;
		font-weight: 500;
		cursor: pointer;
		transition: all 0.2s ease;
	}

	.view-ranking {
		background: #fff;
		color: #666;
		border: 1px solid rgba(0, 0, 0, 0.1);
	}

	.view-ranking:hover {
		background: #f5f5f5;
		border-color: #ccc;
	}

	.play-again {
		background: #0F50DC;
		color: #fff;
	}

	.play-again:hover {
		background: #0F50DC;
		color: #fff;
	}

	.rank-cell {
		.rank-number {
			position: relative;
			font-weight: 600;

			&.rank-first {
				color: #ffd700;
			}

			&.rank-second {
				color: #c0c0c0;
			}

			&.rank-third {
				color: #cd7f32;
			}

			.crown {
				font-size: 32rpx;
				margin-right: 8rpx;

				&.gold {
					color: #ffd700;
				}

				&.silver {
					color: #c0c0c0;
				}

				&.bronze {
					color: #cd7f32;
				}
			}
		}
	}

	.name-cell {
		justify-content: flex-start;
		// padding-left: 16rpx;
		font-weight: 500;
		color: #212529;
	}

	.time-cell {
		color: #495057;
		font-family: 'Courier New', monospace;
	}

	// 查看答案链接
	.view-answers {
		text-align: center;
		margin-top: 40rpx;

		.answers-link {
			color: #999;
			font-size: 26rpx;
		}
	}

	// 底部按钮
	.bottom-buttons {
		display: flex;
		gap: 24rpx;
		margin-top: 40rpx;
		padding: 0 32rpx;
	}

	.btn {
		flex: 1;
		height: 88rpx;
		border-radius: 44rpx;
		font-size: 32rpx;
		font-weight: 500;
		border: none;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: all 0.2s;

		&.homepage-btn {
			background: #fff;
			color: #495057;
			border: 2rpx solid #dee2e6;

			&:hover {
				background: #f8f9fa;
				border-color: #adb5bd;
			}
		}

		&.share-btn {
			background: #007bff;
			color: #fff;

			&:hover {
				background: #0056b3;
			}
		}
	}
</style>